<template>
    <div id="search_container">
        <h1>当地医疗指南</h1>

        <div class="little">

            <p>选择省份：</p>
            <el-dropdown class="box5" @command="select">
                <el-button type="primary">
                    {{ selectedPro }}<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                    
                    <el-dropdown-item v-for="province in provinces" :key="province" :command="province">
                        {{ province }}
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            
        </div>



    </div>
</template>

<script>
//父子传参
import bus from '@/bus/bus'
export default {
    name: "SearcH",
    data() {
        return {
            selectedPro: '北京市',
            provinces: [ // 省份列表
                '北京市', '河北省', '天津市', '山西省', '辽宁省', '吉林省', '黑龙江省', '江苏省',
                '浙江省', '安徽省', '福建省', '江西省', '山东省', '河南省',
                '湖北省', '湖南省', '广东省', '海南省', '四川省', '贵州省',
                '云南省', '陕西省', '甘肃省', '青海省', '台湾省',
                '内蒙古自治区', '广西壮族自治区', '西藏自治区', '宁夏回族自治区',
                '新疆维吾尔自治区', '上海市', '重庆市', '香港特别行政区', '澳门特别行政区'
            ],
        }
    },
    methods: {
        select(command) {
            this.selectedPro = command; // 更新省份信息
            bus.$emit('data-received', this.selectedPro);
        }
    },
    mounted() {

    }
}
</script>

<style scoped>
h1 {
    text-align: center;
    height: 45px;

    font-size: 45px;
    font-family: 楷体, KaiTi, STKaiti, "Microsoft YaHei", sans-serif;
}

#search_container {
    display: flex;
    align-items: center;
    justify-content: center;
    /* flex-direction: column; */
    height: 60px;
    width: 1500px;
    margin-left: auto;
    margin-right: auto;
    background-color: white;
}

#search_container>* {
    margin-bottom: 10px;
}


/* #title {
    margin: 0 auto;
    height: 20px;
} */
#searchInput {
    height: 30px;
    width: 300px;
}

#searchBtn {
    width: 100px;
}

.el-dropdown-menu {
    max-height: 250px;
    position: absolute;
    /* 设置最大高度 */
    overflow-y: auto;
    /* 当内容超出时显示滚动条 */
    scrollbar-width: thin;
    /* 设置滚动条的宽度（部分浏览器支持） */
    scrollbar-color: #888 transparent;
    /* 设置滚动条的颜色（部分浏览器支持） */
}

.little {
    display: flex;
    align-items: center;
    justify-content: end;
    /* flex-direction: column; */
    position: absolute;
    height: 60px;
    width: 65%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
}
</style>